import { Compiler, Component, ComponentFactory, ComponentRef, EventEmitter, Injector, OnDestroy, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { FileUploadHelper } from '@shared/helpers/FileUploadHelper';
import { ContentConfig } from '@shared/service-proxies/service-proxies';
import { IContent2DetailComponent } from '../IContent2DetailComponent';
import { AppContent2DetailService } from '../app-content2-detail.Service';
import { AppModalComponentBase } from '@shared/common/app-modal-component-base';
import { AppConsts } from '@shared/AppConsts';

@Component({
  selector: 'content2-detail-modal',
  templateUrl: './content2-detail-modal.component.html'
})
export class Content2DetailModalComponent extends AppModalComponentBase implements IContent2DetailComponent, OnDestroy {
    @ViewChild('editContentModal', { static: true }) modal: ModalDirective;

    @ViewChild('vc', { read: ViewContainerRef }) vc: ViewContainerRef;

    @Output() backListEvent: EventEmitter<any> = new EventEmitter<any>();
    @Output() seoEdit: EventEmitter<any> = new EventEmitter<any>();

    cmpRef: ComponentRef<any>;

    isLoading: boolean;
    kind: number;
    customKey: string;
    relateId: string;
    id: string;
    randomId: string;
    isTemporary: boolean = false;
    isModal: boolean = true;
    permissionDic: { [key: string]: boolean; } = {};
    pageConfig: ContentConfig;

    saving: boolean = false;

    data: { [key: string]: any; };

    dataSynchronous: boolean = false;

    isLoadingModal = false;

    canSave = false;

    constructor(
        injector: Injector,
        private _contentDetailService: AppContent2DetailService
    ) {
        super(injector);
    }


    show(id: string, kind: number, customKey: string, relateId: string,
        permissionDic: { [key: string]: boolean }, pageConfig: ContentConfig): void {
        this.modalExpandOb.resetStates();

        this.kind = kind;
        this.customKey = customKey;
        this.relateId = relateId;

        this.id = id;
        // if (id) {
        //     this.randomId = id;
        // } else {
        //     this.randomId = FileUploadHelper.newGuid();
        // }

        this.isModal = true;
        this.permissionDic = permissionDic;
        this.pageConfig = pageConfig;
        this.dataSynchronous = this.setting.getBoolean("App.Synchronous.DataSynchronous");

        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
        this.data = {};
        if (this.isLoadingModal) return;
        this.isLoadingModal = true;
        this._contentDetailService.initDetailPage(this, this.vc.injector, true, () => { 
            this.modal.show(); 
            this.isLoadingModal = false;
        });
    }
    close(): void {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
        this.modal.hide();
    }

    save(): void {
        this._contentDetailService.saveItem(this);
    }
    preview(): void {
        this._contentDetailService.previewItem(this);
    }

    goSeoModal() {
        this.seoEdit.emit({ id: this.id, title: this.data.title });
    }

    goToNewPage() {
        this.id = null;

        this._contentDetailService.initDetailPage(this, this.vc.injector, true, () => { this.modal.show();});
    }

    synchorizationById() {
        this._contentDetailService.synchorizationById(this);
    }

    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
    }
}
